import React, { Component } from "react";
// 需要引入prop-types的第三方插件，用于控制props的数据类型
// import PropTypes from "prop-types";
import { string, number, oneOf, oneOfType } from "prop-types";

/*
  用得到的数据类型
    optionalArray: PropTypes.array,
    optionalBigInt: PropTypes.bigint,
    optionalBool: PropTypes.bool,
    optionalFunc: PropTypes.func,
    optionalNumber: PropTypes.number,
    optionalObject: PropTypes.object,
    optionalString: PropTypes.string,
    optionalSymbol: PropTypes.symbol,

    optionalEnum: PropTypes.oneOf(['News', 'Photos']),
    optionalUnion: PropTypes.oneOfType([
      PropTypes.string,
      PropTypes.number,
      PropTypes.instanceOf(Message)
    ]),

    isRequired表示必填
    requiredAny: PropTypes.any.isRequired,
*/

// 类组件规定类型的写法
class Child1 extends Component {
  static propTypes = {
    // name: PropTypes.string,
    // age: PropTypes.number,
    name: string.isRequired,
    age: number,
  };
  render() {
    const { name, age } = this.props;
    return (
      <div>
        child1组件 - {name} - {age}
      </div>
    );
  }
}
// Child1.propTypes = {
//   name: PropTypes.string,
//   age: PropTypes.number,
// };

// 函数组件规定类型的写法
const Child2 = (props) => {
  return <div>child2组件 - {props.sex}</div>;
};
Child2.propTypes = {
  sex: oneOfType([string, number]),
  size: oneOf(["big", "small"]),
};

class App extends Component {
  render() {
    return (
      <>
        <h2>props的数据类型</h2>
        <Child1 age={20} />
        <Child2 sex={1} size="small" />
      </>
    );
  }
}

export default App;
